<template>
  <div id="watch3" v-if="data && productData">
    <div class="apple-watch3-title" :class="{ gundong: scrollTop > 0 }">
      <div class="center">
        <h5>Apple Watch Series 3</h5>
        <p>在线购买，并享受快捷、免费的送货服务。</p>
        <div>概览</div>
      </div>
    </div>
    <div class="f1">
      <div class="center">
        <div class="watch3">
          <div
            class="watch3-tu"
            :class="{
              gundong1: scrollTop > 0 && scrollTop < 553,
              gundong2: scrollTop >= 553,
            }"
          >
            <ul>
              <li>
                <img
                  :src="data[`alu-space-sport-black-2up_GEO_CN.jpg`]"
                  alt=""
                />
              </li>
              <li style="text-align: center; width: 490px">
                <a style="cursor:pointer;" @click="openbigimg">查看图库</a>
              </li>
            </ul>
            <div class="Watch-fw">
              <div class="fw-1">
                <svg
                  viewBox="0 0 35 35"
                  class="
                    as-svgicon
                    as-svgicon-shipping
                    as-svgicon-base
                    as-svgicon-shippingbase
                  "
                  role="img"
                  aria-hidden="true"
                  width="35px"
                  height="35px"
                >
                  <path fill="none" d="M0 0h35v35H0z"></path>
                  <path
                    d="M27.687 10.547l-9-4.852a2.5 2.5 0 00-2.373 0l-9 4.852A2.5 2.5 0 006 12.748v9.471a2.494 2.494 0 001.313 2.2l9 4.852a2.5 2.5 0 002.373 0l9-4.852a2.5 2.5 0 001.314-2.2v-9.471a2.5 2.5 0 00-1.313-2.201zm-10.9-3.971a1.5 1.5 0 011.424 0l9 4.852c.041.022.072.055.11.081l-4.41 2.507-9.628-5.55zm-4.538 2.446l9.651 5.566-4.4 2.5-9.823-5.58c.038-.026.07-.059.111-.081zM7.788 23.539A1.5 1.5 0 017 22.219v-9.471a1.494 1.494 0 01.069-.436L17 17.957v10.516a1.494 1.494 0 01-.212-.082zM28 22.219a1.5 1.5 0 01-.788 1.32l-9 4.851a1.481 1.481 0 01-.212.082V17.957l9.931-5.646a1.5 1.5 0 01.069.436z"
                  ></path>
                </svg>
                <p>选择免费送货服务，或者到 Apple Store 零售店提取现货商品。</p>
              </div>
              <div class="fw-2">
                <svg
                  viewBox="0 0 35 35"
                  class="
                    as-svgicon
                    as-svgicon-return
                    as-svgicon-base
                    as-svgicon-returnbase
                  "
                  role="img"
                  aria-hidden="true"
                  width="35px"
                  height="35px"
                >
                  <path fill="none" d="M0 0h35v35H0z"></path>
                  <path
                    d="M12.249 9.022l-4.461 2.4c-.041.022-.073.055-.111.081l9.823 5.588 4.4-2.5zM27.322 11.507c-.038-.025-.069-.058-.11-.081l-9-4.852a1.5 1.5 0 00-1.424 0l-3.5 1.889 9.628 5.55zM10.8 18.5a.5.5 0 01-.5.5H7v3.219a1.5 1.5 0 00.788 1.32l9 4.852a1.494 1.494 0 00.212.082V17.957l-9.931-5.645a1.494 1.494 0 00-.069.436V18h3.3a.5.5 0 01.5.5zM18 17.957v10.515a1.481 1.481 0 00.212-.082l9-4.851a1.5 1.5 0 00.788-1.32v-9.471a1.5 1.5 0 00-.069-.436z"
                    fill="none"
                  ></path>
                  <path
                    d="M27.687 10.547l-9-4.852a2.5 2.5 0 00-2.373 0l-9 4.852A2.5 2.5 0 006 12.748V17h1v-4.252a1.494 1.494 0 01.069-.436L17 17.957v10.516a1.494 1.494 0 01-.212-.082l-9-4.852A1.5 1.5 0 017 22.219V20H6v2.219a2.494 2.494 0 001.313 2.2l9 4.852a2.5 2.5 0 002.373 0l9-4.852a2.5 2.5 0 001.314-2.2v-9.471a2.5 2.5 0 00-1.313-2.201zm-10.9-3.971a1.5 1.5 0 011.424 0l9 4.852c.041.022.072.055.11.081l-4.41 2.507-9.628-5.55zm-9.11 4.932c.038-.026.07-.059.111-.081l4.461-2.4 9.651 5.561-4.4 2.5zM28 22.219a1.5 1.5 0 01-.788 1.32l-9 4.851a1.481 1.481 0 01-.212.082V17.957l9.931-5.646a1.5 1.5 0 01.069.436z"
                  ></path>
                  <path
                    d="M2.507 18l1.646-1.646a.5.5 0 00-.707-.707l-2.5 2.5a.5.5 0 000 .707l2.5 2.5a.5.5 0 10.707-.707L2.507 19H6v-1zM10.3 19a.5.5 0 000-1H7v1zM6 18h1v1H6z"
                  ></path>
                </svg>
                <p>简单免费的退货服务</p>
              </div>
            </div>
          </div>
          <div class="jieshao">
            <ul class="style">
              <li>
                <h3>Apple Watch</h3>
              </li>
              <li style="font-weight: 600; font-size: 14px">
                <h1>深空灰色铝金属表壳搭配黑色运动型表带</h1>
              </li>
            </ul>
            <div class="jieshao-1">
              <div class="price">
                <p style="font-weight: 600">表壳尺寸</p>
                <div
                  v-for="(item, i) in productData.biaodaichicun"
                  :key="i"
                  @click="changeSize(i)"
                  :class="{ active: now == i }"
                >
                  <div>
                    <h3>{{ item.length }}</h3>
                    <span>表带适合 130–200 毫米腕围。</span>
                  </div>
                  <div>
                    <p>RMB {{ Math.floor(item.price / 24) }}/月‡ 或</p>
                    <p>RMB {{ item.price }}</p>
                  </div>
                </div>
                <!-- <div>
                  <div>
                    <h3>42 毫米</h3>
                    <span>表带适合 140–210 毫米腕围。</span>
                  </div>
                  <div>
                    <p>RMB 71/月‡ 或</p>
                    <p>RMB 1,699</p>
                  </div>
                </div> -->
              </div>
              <ul class="fenqi">
                <li>
                  <h1>RMB 62/月 (24)</h1>
                </li>
                <li>
                  <h1>或</h1>
                </li>
                <li>
                  <h1>RMB {{ proPrice }} 起</h1>
                </li>
              </ul>
              <div style="padding-top: 30px">
                <h3>兼容性</h3>
              </div>
              <div class="jianrong">
                <ul>
                  <li>
                    <img
                      :src="data[`watch-compatibility-icon-201910 (1).png`]"
                      alt=""
                    />
                  </li>
                </ul>
                <ul>
                  <li>
                    为了减少对环境的影响，Apple Watch
                    不随附电源适配器。请使用你现有的电源适配器，或在结账前加购新的电源适配器。
                  </li>
                  <br />
                  <li>
                    Apple Watch 需要使用 iPhone 6s 或后续机型，并安装 iOS 15
                    或更新系统。
                  </li>
                  <br />
                  <li>Apple Watch Series 3 兼容 watchOS 8 及更早版本。</li>
                </ul>
              </div>
              <hr />
              <div class="btn1">
                <button @click="addToShopBag">添加到购物袋</button>
              </div>
              <div class="store">
                <div>
                  <h5>还拿不定主意？</h5>
                  <p>将此商品收藏到清单，方便回头再来挑选。</p>
                </div>
                <svg
                  width="35px"
                  height="35px"
                  class="
                    as-svgicon
                    as-svgicon-bookmark
                    as-svgicon-base
                    as-svgicon-bookmarkbase
                  "
                  role="img"
                  aria-hidden="true"
                >
                  <path fill="none" d="M0 0h35v35H0z"></path>
                  <path
                    d="M21.952 6.433a2.157 2.157 0 011.567.481A2.228 2.228 0 0124 8.516v19.866a.709.709 0 01-.018.178.7.7 0 01-.058-.013 8.985 8.985 0 01-.757-.674l-4.866-4.901a1.111 1.111 0 00-1.602 0l-4.857 4.891a7.25 7.25 0 01-.754.676.145.145 0 01-.053.028h-.015a.681.681 0 01-.02-.185V8.516a2.228 2.228 0 01.48-1.602 2.158 2.158 0 011.568-.48h8.904m0-1h-8.904a3.077 3.077 0 00-2.278.776A3.144 3.144 0 0010 8.516v19.866a1.276 1.276 0 00.276.868.956.956 0 00.76.317 1.073 1.073 0 00.632-.213 8.377 8.377 0 00.874-.776l4.866-4.9a.115.115 0 01.184 0l4.866 4.9a10.454 10.454 0 00.868.77 1.048 1.048 0 00.639.219.956.956 0 00.76-.317 1.276 1.276 0 00.275-.868V8.516a3.144 3.144 0 00-.77-2.306 3.077 3.077 0 00-2.278-.776z"
                  ></path>
                </svg>
              </div>
              <div class="help">
                <div style="display: flex">
                  获得购买帮助,
                  <p style="color: #0071e3">立即聊天</p>
                  或致电 400-666-8800.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="f2">
      <div class="center">
        <div class="gongneng" style="padding-right: 81px">
          <ul>
            <li>
              <h3>Series 3 (GPS) 功能</h3>
            </li>
            <li>深空灰色铝金属表壳</li>
            <li>GPS/GNSS</li>
            <li>配备双核处理器的 S3 芯片</li>
            <li>W2 Apple 无线芯片</li>
            <li>气压高度计</li>
            <li>光学心率传感器</li>
            <li>心率过高或过低时的预警通知以及心律不齐提示</li>
            <li>加速感应器</li>
            <li>陀螺仪</li>
            <li>无线网络 (802.11b/g/n 2.4GHz)</li>
            <li>Ion-X 玻璃镜面显示屏</li>
            <li>最长可达 18 小时的电池使用时间</li>
            <li>50 米防水</li>
            <li>复合材质表背</li>
          </ul>
        </div>
        <div class="chicun">
          <div>
            <h3>尺寸</h3>
          </div>
          <div class="chicun-1">
            <img :src="data[`watch-compatibility-icon-201910.png`]" />
            <ul>
              <li>高度：38.6 毫米</li>
              <li>宽度：33.3 毫米</li>
              <li>厚度：11.4 毫米</li>
              <li>表壳重量 (GPS)：26.7 克</li>
            </ul>
          </div>
          <div class="chicun-2">
            <img :src="data[`watch-spec-dim-42-201609_GEO_CN.png`]" alt="" />
            <ul>
              <li>高度：42.5 毫米</li>
              <li>宽度：36.4 毫米</li>
              <li>厚度：11.4 毫米</li>
              <li>表壳重量 (GPS)：32.3 克</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="f3">
      <div class="center">
        <div class="nr">
          <div class="zi">
            <h2>包装内容</h2>
          </div>
          <div class="tujie">
            <div>
              <ul>
                <li><img :src="data[`42-aluminum-grey-case.jpg`]" alt="" /></li>
              </ul>
              <p>深空灰色铝金属表壳</p>
            </div>
            <div>
              <ul>
                <li>
                  <img
                    :src="data[`42-alu-space-sport-black-nc-band.jpg`]"
                    alt=""
                  />
                </li>
              </ul>
              <p>运动型表带 - 可组装成 S/M 或 M/L 的长度</p>
            </div>
            <div>
              <ul>
                <li>
                  <img :src="data[`watch-witb-charger-201703.jpg`]" alt="" />
                </li>
              </ul>
              <p>磁力充电器转 USB-A 连接线 (1 米)</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <msg-mask ref="msgMaskbtn" />
    <div
      class="watchBigimg"
      ref="watchBigimg"
      v-if="productData"
      @click.stop="hidebigimg"
    >
      <div class="watchBigimg-box">
        <!-- <ul>
          <li v-for="(img, i) in productData.watchBigimg" :key="i">
            <img :src="img" />
          </li>
        </ul> -->
        <swiper
          :spaceBetween="30"
          :hashNavigation="{
            watchState: true,
          }"
          :pagination="{
            clickable: true,
          }"
          :navigation="true"
          
          class="mySwiper"
        >
          <swiper-slide data-hash="slide1">
            <ul>
              <li v-for="(img, i) in productData.watchBigimg" :key="i">
                <img :src="img" />
              </li>
            </ul>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import MsgMask from "@/components/MsgMask.vue";
export default {
  components: {
    MsgMask,
  },
  data() {
    return {
      data: null,
      productData: null,
      uuserBagData: null,
      roTitle: "",
      proPrice: 0,
      proImg: "",
      now: -1,
      scrollTop: null,
      bigimg: "",
    };
  },

  methods: {
    getData() {
      let url = "http://localhost:3000/ZFWImg";
      axios.get(url).then((res) => {
        this.data = res.data;
        console.log(res.data);
      });
    },
    getProductData() {
      let url = `http://localhost:3000/product/20`;
      axios.get(url).then((res) => {
        this.productData = res.data;
        console.log(res.data);
      });
    },
    changeSize(i) {
      if (i == 0) {
        //0 38毫米
        this.proTitle = "Apple Watch 3 38毫米"
        this.proPrice = this.productData.biaodaichicun[0].price
        this.now = 0
      } else if (i == 1) {
        //1 42毫米
        this.proTitle = "Apple Watch 3 42毫米"
        this.proPrice = this.productData.biaodaichicun[1].price
        this.now = 1
      }
      this.proImg = this.productData.toListImg;
    },
    addToShopBag() {
      let user = sessionStorage.getItem("user");
      //判断是否选择了商品
      if (this.now < 0) {
        return;
      }
      // 判断是否登录过，否则就直接返回到登录页面
      if (user == "" || !user) {
        this.$refs.msgMaskbtn.setInformation({
          title: "未登录",
          // btnTitle:'去登陆',
          callback() {
            this.$router.push("/login");
          },
        });
        this.$refs.msgMaskbtn.showbtnMask();
        return;
      }

      //解析json字符串为js对象
      user = JSON.parse(user);

      //用户信息已经拿到了,接下来是拿到用户购物袋的信息
      let userurl = `http://localhost:3000/shopBagList?userId=${user.id}`;
      axios.get(userurl).then((res) => {
        this.userBagData = res.data;

        let seemProduct = this.checkProductNum(this.proTitle);

        //商品在数据库里的数量如果不等于空
        //就代表着有重复着的数据
        if (seemProduct != null) {
          let url2 = `http://localhost:3000/shopBagList/${seemProduct.id}`;
          seemProduct.num += 1;
          // seemProduct 是重复的商品对象，也就是说其实数据不用更改，直接将之前的数据重写就好了
          // 另外需要将对象里的num数量+1
          axios.put(url2, seemProduct).then((res) => {
            this.$refs.msgMaskbtn.setInformation({
              title: "添加商品成功",
            });
            this.$refs.msgMaskbtn.showbtnMask();
          });
        } else {
          //这里是没找到重复商品的操作
          //正常的添加操作 post
          let url = `http://localhost:3000/user/${user.id}/shopBagList`;
          axios
            .post(url, {
              title: this.proTitle,
              price: this.proPrice,
              img: this.proImg,
              num: 1, //默认的参数 已添加为1
              //post的参数是一个对象，里面只接受四个参数
            })
            .then((res) => {
              this.$refs.msgMaskbtn.setInformation({
                title: "添加商品成功",
              });
              this.$refs.msgMaskbtn.showbtnMask();
            });
        }
      });
    },
    checkProductNum(proTitle) {
      //检查用户列表下的商品数量
      //返回值 重复的商品对象
      //参数，需要进行检查的商品标题
      for (const e of this.userBagData) {
        if (e.title == proTitle) {
          return e;
        }
      }
      return null;
    },
    handleScroll() {
      //这个滚动函数是声明在window里的，也就是说，其他人的页面也会有这个滚动函数，
      //但是并没有ipadpro里的各种对象，所以会报错，
      //故加一个if判断，当路由的路径是ipadPro时，才会运行这段代码
      // console.log(this.$route.path)
      // let box2 = document.getElementById("box2Content");
      this.scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      //  console.log(this.scrollTop)
    },
    openbigimg() {
      let o = this.$refs.watchBigimg;
      o.style.display = "block";
    },
    hidebigimg() {
      let o = this.$refs.watchBigimg;
      o.style.display = "none";
    },
  },
  mounted() {
    this.getData();
    this.getProductData();
    window.addEventListener("scroll", this.handleScroll, true);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style lang="less" scoped>
#watch3 {
  width: 100%;
  height: 100%;
}
</style>
<style scoped src="../assets/css/watch3.css"></style>